<template>
  <Co
    ref="selectTable"
    :table="state.table"
    :columns="state.table.columns"
    :max-height="400"
    :keywords="{ label: 'fnumber', value: 'bmmc' }"
    isShowPagination
    isKeyup
    isExpanded
    :filter-method="filterMethod"
    @radioChange="radioChange"
    @blur="handleBlur"
    @page-change="pageChange"
    @input="radioChange1"
    :row-style="rowState"
  ></Co>

  <el-form-item style="background-position: top; margin-top: 500px">
    <label style="width: 100px; padding-right: 5px"> 测试</label>
    <el-input
      style="width: 180px"
      v-model="mnElementRange"
      clearable
      placeholder="0.00-1.00"
    />
  </el-form-item>
</template>
<script setup lang="tsx">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import * as crud from "../components/utils/crud.ts";
import SearchTableDialog from "@/components/dialogs/SearchTableDialog.vue";
import Co from "../components/utils/t-ui-plus-dev/packages/select-table/src/index.vue";
const mnElementRange = ref("");
const selectTable = ref();
const state: any = reactive({
  table: {
    total: 0,
    currentPage: 1,
    data: [],
    columns: [
      // { type: "index", fixed: true, width: "60", align: "center" },
      //   { type: "selection", width: "65", align: "center" },
      { prop: "id", label: "Id", width: "120", align: "center" },
      { prop: "fnumber", label: "编码", width: "120", align: "center" },
      { prop: "bmmc", label: "k3名称", width: "150", align: "center" },
      { prop: "wlgg", label: "物料规格", width: "150", align: "center" },
      { prop: "jldw", label: "计量单位", width: "150", align: "center" },
    ],
  },
});
onMounted(() => {
  getData(1);
});
const k3bm = ref("");
const getData = async (pageNum) => {
  const res = await crud.fetchData("/get/K3bm", "post", {
    page: pageNum,
    limit: 10,
    k3bm: k3bm.value,
  });
  console.log(res);

  if (res.size == 0) {
    state.table.total = 0;
    return;
  }
  state.table.data = res;
  state.table.total = res[0].total;
};
// 获取当前的页码
const pageChange = (val) => {
  console.log("获取当前的页码", val);
  state.table.currentPage = val;
  getData(val);
};

const handleStatusChange = (row) => {
  let text = row.enableStatus === 1 ? "启用" : "废止";
  ElMessageBox.confirm(`确认要${text}这条数据吗？`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      console.log("点击确定");
    })
    .catch(() => {
      console.log("点击取消");
    });
};

const radioChange = (row) => {
  k3bm.value = row.bmmc;
  if (Object.keys(row).length !== 0) {
    // mnElementRange.value = row.bmmc;
  }
  selectTable.value.focus();
};
const radioChange1 = (row) => {
  //   setTimeout(() => {
  //     console.log(selectTable);
  //   }, 500);
};
const handleBlur = () => {
  selectTable.value.clear();
};
const filterMethod = (val) => {
  console.log(val);
};
const rowState = (arg) => {
  return {
    height: "20px", // 设置合适的行高值
    fontSize: "12px", // 设置合适的字体大小值
    // color: "black",
  };
};
</script>
